## 什么是盒模型

在 css 中把 Html 元素都视为一个个盒子，有块级盒子，内联盒子，行内块盒子等。  
在浏览器进行渲染时，盒子的尺寸到底怎么算，是不是要有一套标准，这套标准称为盒模型。

:::info
CSS 盒模型是一个矩形盒子，由内容、内边距、边框和外边距组成。它有两种不同的盒模型：标准盒模型和 IE 盒模型。标准盒模型的宽度和高度只包括内容区，而 IE 盒模型的宽度和高度包括了内容区、内边距和边框。
:::
## 盒模型分类

** 第一种：标准盒模型 content-box **  
尺寸等于：内容尺寸(或固定宽高) + 内边距 + 边框

```css
/* 这个盒子的宽高各是多少？*/
div {
  box-sizing: content-box;
  width: 10px;
  /* height: 10px; */
  /* padding: 1px; */
  /* margin: 1px; */
  /* border: 1px solid red; */
}

/* 答案：宽和高各是14px*/
/* 宽： width:10   +   paddingLeft:1  + paddingRight:1   + borderLeft:1  + borderRight:1 */
/* 高： height:10  +   paddingTop:1  + paddingBottom:1   + borderTop:1  + borderBottom:1 */
```

offsetWidth=（内容宽度 ＋内边距 ＋边框），无外边距

** 第二种：border-box 又称IE盒模型或怪异盒模型**  
尺寸等于：内容尺寸(或固定宽高), 内边距和边框都包含在内，不再累加。

```css
/* 这个盒子的宽高各是多少？*/
div {
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  padding: 1px;
  margin: 1px;
  border: 1px solid red;
}

/* 答案：宽和高各是10px*/

/* 宽： width:10   */
/* 高： height:10  */
```
